This link will take you to the W3 Schools, a fantastic resource for JavaScript and other stuff.
| Type this... | ... to get this | |||||
|---|---|---|---|---|---|---|
|
Click on this link to see the result of the code on the left. |
|||||
<!-- Buttons -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</title>
</head>
<body>
<p>This is a JavaScript with two buttons</p>
<div style="padding:10px;">
<button onclick="alert('How can I help you?')" style="padding:20px;border-radius:30px;">
Click here to see a help message.
</button>
</div>
<div style="padding:10px;">
<button id="button2" style="padding:5px;border-radius:30px;">
Click here to see a message from Captain Obvious.
</button>
</div>
<script>
document.getElementById("button2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Changing the HTML inside a div</title>
<style>
.bluebox{
background-color: lightblue;
height: 50px;
width:auto;
}
.yellowbox{
background-color: yellow;
height: 100px;
width: auto;
}
.greenbox{
background-color: green;
color: white;
height: 50px;
width: auto;
}
</style>
</head>
<body>
<div class="bluebox" id="firstbox">
<p>
App Designer is a tool we use to develop app engines.
</p>
</div>
<div class="yellowbox" id = "secondbox">
<p>
Concordia implemented PeopleSoft in 2015.
</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
<div style = "padding:20px;">
<button id="button1">
Click on this button to change the content of the first box.
</button>
</div>
<div style = "padding:20px;">
<button id="button2">
Double click on this button to change the content of the second box.
</button>
</div>
<script>
document.getElementById("button1").onclick = function(){
document.getElementById("firstbox").innerHTML =
"<p>As you can see, the text inside the first box has now been modified.</p>";
}
document.getElementById("button2").ondblclick = function(){
document.getElementById("secondbox").innerHTML =
"<p>This is a list of fruits:</p><ol><li>Apple</li><li>Banana</li><li>Orange</li></ul>";
}
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Changing the HTML style of a div</title>
<style>
.bluebox{
background-color: lightblue;
height: 50px;
width:auto;
}
.yellowbox{
background-color: yellow;
height: 80px;
width: auto;
}
.greenbox{
background-color: green;
color: white;
height: 50px;
width: auto;
}
</style>
</head>
<body>
<div class="bluebox" id="firstbox">
<p>
App Designer is a tool we use to develop app engines.
</p>
</div>
<div class="yellowbox" id = "secondbox">
<p>
Concordia implemented PeopleSoft in 2015.
</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
<div style = "padding:20px;">
<button id="button1">
Click on this button to change the style of the first box.
</button>
</div>
<div style = "padding:20px;">
<button id="button2">
Double click on this button to change the style of the second box.
</button>
</div>
<script>
document.getElementById("button1").onclick = function(){
document.getElementById("firstbox").style.width = '400px';
document.getElementById("firstbox").style.backgroundColor = 'darkred';
document.getElementById("firstbox").style.color = 'white';
}
document.getElementById("button2").ondblclick = function(){
document.getElementById("secondbox").style.fontFamily = 'monospace';
document.getElementById("secondbox").style.fontSize = '2em';
}
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!-- Variables -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Variables</title>
</head>
<body>
<p>This is JS program showing the use of variables</p>
<script>
var x = 3; <!-- This variable is numeric -->
document.write(x + "<br \>");
var y; <!-- This variable is undefined -->
y = 5; <!-- Now it became a numeric variable -->
var z; <!-- This variable is undefined -->
document.write("the value of z is " + z + "<br \>");
z = x + y; <!-- Now it became a numeric variable -->
document.write("the value of z is " + z + "<br \>");
document.write("the type of z is: " + typeof(z) + "<br \>");
z = x + " " + y; <!-- Now it became a string variable -->
document.write("the value of z is " + z + "<br \>");
document.write("the type of z is " + typeof(z) + "<br \>");
var greeting = "Hello";
var firstname = "John";
var message = greeting + " " + firstname;
document.write("the value of message is: " + message + "<br \>");
document.write("the type of message is: " + typeof(message) + "<br \>");
var check = (x == 5); <!-- The variable x us numeric, the variable check is boolean -->
document.write("the value of check is: " + check + "<br \>");
document.write("the type of check is: " + typeof(check) + "<br \>");
var myArray = [1,2,3]; <!-- This is an array -->
document.write(myArray + "<br \>");
document.write(typeof(myArray) + "<br \>");
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!-- Functions -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Functions</title>
</head>
<body>
<p>This is a JS program showing the use of functions</p>
<script>
function sum(a, b){
return a + b;
}
function prod (a, b){
return a * b;
}
function average(a, b){
return sum (a, b)/2; <!-- As you can see here, we can use a function inside another function -->
}
var x = 3;
var y = 8;
var xy_sum = sum(x, y);
var xy_prod = prod(x, y);
var xy_average = average(x, y);
document.write("The values of x and y are " + x + " and " + y + "<br \>");
document.write("The sum of x and y is " + sum (x, y) + "<br \>");
document.write("The product of x and y is " + prod (x, y) + "<br \>");
document.write("The average of x and y is " + average (x, y) + "<br \>");
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!-- Objects -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Objects</title>
</head>
<body>
<p>This is a JS program showing the use of objects</p>
<script>
var FavMovie = {
title : "Blade Runner" ,
genre : "Science Fiction",
year : 1982,
star : "Harrison Ford"
};
window.console.log(FavMovie);
delete FavMovie.year;
window.console.log(FavMovie);
window.console.log(FavMovie.genre);
var OtherFavMovie = FavMovie;
window.console.log(OtherFavMovie);
OtherFavMovie.title = "Star Wars";
window.console.log(FavMovie);
window.console.log(OtherFavMovie);
document.write("Check the console of your browser!");
</script>
</body>
</html>
|
Click on this link to activate the code on the left. In order to see the results you have to check the console of your browser. |
|||||
<!-- Arrays -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arrays</title>
</head>
<body>
<p id="myPara">This is a JS program showing the use of arrays</p>
<script>
function showResult(x){
document.getElementById("myPara").innerHTML += "<br />" + x;
}
var MontrealUniversities = ["McGill", "HEC", "Polytechnique"];
showResult(" ");
showResult(MontrealUniversities);
showResult(MontrealUniversities[0]);
showResult(MontrealUniversities[2]);
MontrealUniversities[1] = "Vanier";
showResult(MontrealUniversities);
MontrealUniversities[2] = "Concordia";
showResult(MontrealUniversities);
delete MontrealUniversities[1];
showResult(MontrealUniversities);
MontrealUniversities[1] = "Vanier";
showResult(MontrealUniversities);
MontrealUniversities.splice(1,1);
showResult(MontrealUniversities);
MontrealUniversities.splice(1,0,"UdeM", "UQAM"); <!-- You can add new items in the middle of your array. -->
showResult(MontrealUniversities);
MontrealUniversities.sort(); <!-- You can sort your array! -->
showResult(MontrealUniversities);
MontrealUniversities.reverse(); <!-- And even reverse its order! -->
showResult(MontrealUniversities);
<!-- Here we demonstrate how to split a string into an array -->
var myString = 'What is the meaning of life?';
var myArray = myString.split(' ',5);
showResult(myArray);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!-- Conditions: if and swicth -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Conditions: if and swicth</title>
</head>
<body>
<p>This is a JS program showing the use of conditional statements</p>
<p>Speed on the motorway:
<input id="speed" type="number"/>
<button onclick="checkSpeed()">
Check
</button>
</p>
<p>Your season now:
<input id="myInput"/>
<button onclick="checkSeason()">
Submit
</button>
</p>
<script>
function checkSpeed(){
var speed = document.getElementById("speed").value;
if (speed>70){
window.alert("You are going too fast!");
}
else if(speed<40){
window.alert("You are going too slow!");
}
else{
window.alert("Your speed is fine");
}
}
function checkSeason(){
var x = document.getElementById("myInput").value.toLowerCase();
switch(x){
case "summer":
window.alert("It is so hot!");
break;
case "winter":
window.alert("It is cold, isn't it?");
break;
case "spring":
window.alert("Nature is coming back to life!");
break;
case "autumn":
window.alert("The colors! The colors!!");
break;
case "fall":
window.alert("The colors are so beautiful this time of the year!");
break;
default:
window.alert("I do not recognise this");
}
}
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!-- Loops: for and while -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loops: for and while</title>
</head>
<body>
<p id = "myPara">This is a JS program showing the use of looping statements</p>
<script>
document.getElementById("myPara").innerHTML += "<br />";
<!-- A for loop going up -->
for(i=0; i<5; i++){
document.getElementById("myPara").innerHTML += "<br />" + i;
}
document.getElementById("myPara").innerHTML += "<br />";
<!-- A for loop going down -->
for(i=7; i>0; i--){
document.getElementById("myPara").innerHTML += "<br />" + Math.pow(i,2);
}
document.getElementById("myPara").innerHTML += "<br />";
var rainbow = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
<!-- A for loop based on the size of a list -->
for(i=0; i<rainbow .length; i++){
document.getElementById("myPara").innerHTML += "<br />" + rainbow [i];
}
document.getElementById("myPara").innerHTML += "<br />";
var ordinals = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh" ];
var sins = ["pride", "greed", "lust", "envy", "gluttony", "wrath", "sloth" ];
var virtues = ["humility", "charity", "chastity", "gratitude", "temperance", "patience", "diligence" ];
var i = 0;
<!-- And here we have a while loop -->
while(i<7){
document.getElementById("myPara").innerHTML += "<br /> The " + ordinals[i] + "
sin is <b>" + sins [i] + "</b>; its corresponding virtue is <b>" + virtues [i] + "</b>.";
i++; <!-- This is equivalent to writing i = i + 1; -->
}
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!-- And now a silly little game -->
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>A silly little game</title>
<style>
#button {
border: none;
width: 80px;
padding: 20px;
}
</style>
<head>
<body>
<p>Click on the button below to see what happens</p>
<div id="button">
<button>Click me if you dare!</button>
</div>
<script>
document.getElementById("button").onmouseover = function()
{
var margin_top = Math.floor(Math.random() * 520);
var margin_left = Math.floor(Math.random() * 460);
this.style.margin = margin_top + "px 0px 0px " + margin_left + "px";
}
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||